<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="div1" aa="bb">

    </div>

    <script>
        // DOM操纵
        // 1. 添加新元素
        // let newDiv = document.createElement('div'); // 在当前文件（文档）中创建一个新div元素（标签）
        // // document.body 直接获取body对象
        // // document.documentElement 直接获取html对象
        // // document.head 直接获取head对象
        // newDiv.innerHTML = 'haha'; // 向newDiv中添加元素内容
        // document.body.appendChild(newDiv); // 将newDiv做为子元素插入到body内部后面

        // let div1 = document.getElementById('div1');
        // let newP = document.createElement('p');
        // newP.innerHTML = 'hehe';
        // div1.appendChild(newP);

        // div1.appendChild('<p>hohh</p>');
        // div1.append('<p>hohh</p>');

        // document.body.removeChild(div1);
        // div1.remove();

        // function remove(elem){
        //     elem.parentNode.removeChild(elem);
        // }

        // remove(div1);

        // let fruits = ["apple", "banana", "orange"];
        // let ul1 = document.querySelector("#ul1");
        // // let lis = document.querySelector("#ul1 li");
        // // let list = document.getElementById('ul1')
        // // ul1.getElementsByTagName('li');

        // fruits.forEach(function(fruit){
        //     // ul1.insertAdjacentHTML("beforeend", '<li>'+fruit+'</li>');
        //     // `<li>${fruit}</li>`: ``模板字符串
        //     ul1.insertAdjacentHTML("beforeend", `<li>${fruit}</li>`); 
        // });

        // let div1 = document.querySelector('#div1');
        // let newP = document.createElement("p");
        // newP.innerHTML = 'haha';
        // div1.appendChild(newP);

        // let div2 = document.createElement("div");
        // let p = document.createElement("p");
        // let span = document.createElement("span");
        // span.innerHTML = 'hoho';
        // p.appendChild(span);
        // div2.appendChild(p);
        // div1.appendChild(div2);

        // div1.insertAdjacentText("beforeend", `
        //     <div id="div2">
        //         <p>
        //             <span>hehe</span>
        //         </p>
        //     </div>
        // `);

        let div1 = document.querySelector('#div1');
        // div1.id = 'aa';
        div1.setAttribute("aa", 'cc');
        console.log(div1.getAttribute('aa'));

        div1.dd = 'ee';
        console.log(div1.dd);


    </script>
</body>

</html>